@include('backstage/public/_header')
    <style type="text/css">
        .select select{ margin-right: 10px; }
        select option{height:15px;padding: 0;}
        iframe.faImg{display:none;width:200px;height:500px;padding-left:10px;background:#fff;position:absolute;top:14px;left:270px;border: 1px solid #ccc;}
    </style>
    <!--結果集標題與導航組件 開始-->
    <div class="result_wrap">
        <!-- <div class="result_title">
            <h3>快捷操作</h3>
        </div>
        <div class="result_content">
            <div class="short_wrap">
                <a href="#"><i class="fa fa-plus"></i>新增文章</a>
                <a href="#"><i class="fa fa-recycle"></i>批量刪除</a>
                <a href="#"><i class="fa fa-refresh"></i>更新排序</a>
            </div>
        </div> -->
    </div>
    <!--結果集標題與導航組件 結束-->
    
    <div class="result_wrap">
        <form id="form_data" method="post">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <input type="hidden" name="id" value="{{$info->id}}"/>
            <table class="add_tab">
                <tr>
                    <th width="120">父級菜單：</th>
                    <td class="select" >
                            <select name="pid" >
                                <option>==頂級菜單==</option>
                                @foreach($menu as $v)
                                <option value="{{$v->id}}" @if($v->id==$info->pid)selected="selected"@endif>{!!$v->menu_name!!}</option>
                                @endforeach
                            </select>
                        </div>
                    </td>
                </tr>
                </tr>
                <tr>
                    <th>菜單名稱：</th>
                    <td>
                        <input type="text" name="menu_name" value="{{$info->menu_name}}">
                        <span><i class="fa fa-exclamation-circle yellow"></i>不能為空</span>
                    </td>
                </tr>
                <tr>
                    <th>菜單路徑：</th>
                    <td>
                        <input type="text" name="url" value="{{$info->url}}">
                    </td>
                </tr>
                <tr>
                    <th>菜單圖標：</th>
                    <td style="position:relative;">
                        <input type="text" name="icon" value="{{$info->icon}}" style="width:200px;">
                        <span onclick="img(this);" style="font-size:16px; color:#000; cursor: pointer;" ><i class="fa fa-plus-circle"></i></span>
                        <iframe src="/backstage/menu/fa_img" class="faImg" frameborder="0" ></iframe>
                    </td>
                </tr>
                <tr>
                    <th>控制器名稱：</th>
                    <td>
                        <input type="text" name="action" value="{{$info->action}}">
                    </td>
                </tr>
                <tr class="power">
                    <th>擁有權限：</th>
                    <td>
                        <input type="button" onclick="add_attr(this)" value="添加權限">
                        <span>用來識別該菜單下的子權限，根據路由設置情況添加方法名</span>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                        <input type="button" class="back" onclick="history.go(-1)" value="返回">
                    </td>
                </tr>
            </table>
        </form>
        <div class="tips" style="margin-top: 20px;">
            <h3>菜單和權限修改問題:</h3>
            <p>1、功能權限分為該菜單下每個功能權限名稱和方法名</p>
            <p>2、菜單常用的功能權限：首頁列表(index),添加頁面(add),添加操作(doadd),修改頁面(edit),修改操作(doedit),刪除操作(dodel),查看(show)</p>
            <p>3、方法名在這裏全部小寫！！！</p>
            <p>4、功能權限通過serialize序列化保存</p>
        </div>
    </div>
    <script type="text/javascript">
        add_power();
        function add_power(){
            var obj = '{!!$info->has_permissions!!}';
            if(obj == ''){
                return false;
            }
            var json = JSON.parse(obj);
            // console.log(json);
            for (var i in json) {
                var attr = '<tr>\
                        <th width="120"></th>\
                        <td>\
                            <dl class="attr">\
                                <dt>功能名：<input type="text" name="attr_name[]" value="'+json[i]+'" > <span onclick="del_attr_value(this)"><i class="fa fa-minus-circle"></i></span></dt>\
                                <dd>方法名：<input type="text" name="attr_value[]" value="'+i+'" ></dd>\
                            </dl>\
                        </td>\
                    </tr>';
                $('.power').after(attr);
            }
        }

        function img(obj){
            if($(this).find('i').hasClass('fa-plus-square-o')){
                $(this).find('i').addClass('fa-minus-square-o').removeClass('fa-plus-square-o');
            }else{
                $(this).find('i').addClass('fa-plus-square-o').removeClass('fa-minus-square-o');
            }
            $("iframe.faImg").slideToggle("slow");
        }
        var vfTime = 2;
        var timer=null;
        function setTime(){
            vfTime --;
            if(vfTime<=0){
                vfTime = 0;
                clearInterval(timer);
            }
        }
        // 提交
        function onSubmit(){
            var menu_name=$(":input[name='menu_name']").val();
            if (vfTime!=0 && timer!=null){
                layer.msg('操作過於頻繁', {icon: 7,anim: 6});
                // setTimeout(function(){$("#chiContent").focus();}, 1500);
                return false;
            }
            if (menu_name==''){
                layer.msg('菜單名稱不能為空', {icon: 5,anim: 6});
                setTimeout(function(){$(":input[name='menu_name']").focus();}, 0);
                return false;
            }
            var form = new FormData(document.getElementById("form_data"));
            $.ajax({
                url:"{{$doedit}}",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                dataType : "json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.message, {icon: 6});
                        setTimeout(function(){
                            window.location.href=data.jumpUrl;
                        },2000);
                    }else if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                    }else{
                        layer.msg(data.message, {icon: 5});
                    }
                    clearInterval(timer);
                    timer = setInterval(setTime, 1000, "1");
                },
                // error:function(e){
                //     layer.msg(e, {icon: 5,anim: 6});
                //     clearInterval(timer);
                //     timer = setInterval(setTime, 1000, "1");
                // }
            });
        }
        //點擊添加屬性框
        function add_attr(obj){
            var attr = '<tr>\
                    <th width="120"></th>\
                    <td>\
                        <dl class="attr">\
                            <dt>功能名：<input type="text" name="attr_name[]"> <span onclick="del_attr_value(this)"><i class="fa fa-minus-circle"></i></span></dt>\
                            <dd>方法名：<input type="text" name="attr_value[]" ></dd>\
                        </dl>\
                    </td>\
                </tr>';
            $(obj).parents('tr').eq(0).after(attr);
        }

        //刪除壹行
        function del_attr_value(obj){
            $(obj).parents('dl').parents('td').parents('tr').remove();
        }

        //點擊添加屬性值輸入框
        function add_attr_value(obj){
            var input = '<input type="text" name="attr_value[]" >';
            $(obj).parents('dl').find('dd').append(input);
        }
        function setStr(str){
            $("input[name='icon']").val(str);
        }
    </script>
@include('backstage/public/_footer')